<!-- 我的权益 -->
<template>
    <view class="head">
        <swiper previousMargin="40rpx" nextMargin="40rpx" :autoplay="false" class="head-slider" :current="cidx"
            @change="changeLevel">
            <view v-if="list.length < 1 && loading === false" style="padding:300rpx 0">
                <uv-empty mode="list" text="~暂无数据~" icon="/static/imgs/empty/car.png" />
                <view class="tn-mt-xl flex-center">
                    <uv-button @click="goto.back()" shape="circle" text="上一页" />
                </view>
            </view>
            <template v-if="list.length > 0">
                <swiper-item v-for="x in list" :key="x">
                    <view class="flex-y flex-center">
                        <view class="tn-shadow-md">
                            <uv-image :src="x.image" width="640rpx" height="905rpx" :lazy-load="true" radius="8rpx" />
                        </view>
                        <view class="tn-p">{{ x.name }}</view>
                    </view>
                </swiper-item>
            </template>
        </swiper>

        <view class="flex-center footbox" v-if="list.length > 0">
            <uv-transition :show="true" mode="slide-bottom">
                <uv-button shape="circle" type="success" text="保存海报" @click="save"
                    customStyle="width:450rpx;height:90rpx" />
            </uv-transition>
        </view>
    </view>
</template>

<style lang="scss">
page,
uni-page-body {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #fcfcfc;
}

.head {
    width: 750rpx;
    height: 100%;
    overflow: hidden;
    position: relative;
    padding-top: 40rpx;

    &::before {
        top: 0;
        left: -150rpx;
        width: 150%;
        height: 350rpx;
        content: "";
        display: block;
        position: absolute;
        background-color: rgba(85, 55, 19, 0.8);
        border-bottom-left-radius: 80%;
        border-bottom-right-radius: 80%;
    }

    &-slider {
        width: 750rpx;
        height: 100%;
    }
}
</style>

<script lang="ts">

import { defineComponent } from 'vue'
import { TaUseAccount, TaDataUser, TaToast, TaLoading } from '@/utils'

export default defineComponent({
    setup() {
        return TaUseAccount()
    },
    data() {
        return {
            rule: <any>{},
            list: <any[]>[],
            cidx: <number>0,
            loading: true,
        }
    },
    onLoad() {
        this.loadData();
    },
    onPullDownRefresh() {
        this.loadData()
        setTimeout(() => uni.stopPullDownRefresh(), 1000)
    },
    methods: {
        loadData() {
            TaLoading.show('正在加载...')
            TaDataUser.my.posters().then((ret: any) => {
                this.loading = false;
                if (ret.data.length > 0) {
                    this.list = ret.data;
                    this.rule = this.list[0];
                }
            }).finally(() => TaLoading.hide())
        },
        changeLevel(e: any) {
            this.rule = this.list[e.detail.current] || {}
        },
        save() {

            // #ifdef MP
            uni.authorize({
                scope: 'scope.writePhotosAlbum',
                success: () => this.down(),
                fail(error) {
                    TaToast.error(error)
                }

            })
            // #endif
            // #ifndef MP
            this.down()
            // #endif
        },
        down() {
            uni.downloadFile({
                url: this.rule.image,
                success: (res: any) => {
                    uni.saveImageToPhotosAlbum({
                        filePath: res.tempFilePath,
                        success: (ret: any) => {
                            console.log(ret)
                            TaToast.success('图片保存成功！');
                        }, fail(e) {
                            console.log(e);
                            TaToast.error('图片保存失败!');
                        }
                    })
                }
            })
            console.log(JSON.stringify(this.rule))
        }
    }
})
</script>